class TopLine extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            menuicon: !0,

            selindex: -1
        };
    }

    componentDidMount() {

    }

    navClick(url, i, e) {
        let { selindex } = this.state
        if (selindex == i) return
        this.setState({ selindex: i }, () => {
            this.formatlist()
            // window.location.href = `${url}.html`
        })
    }
    menuicon() {
        let { menuicon } = this.state
        this.setState({ menuicon: !menuicon })
    }
    quit() {
        $.cookie('token', "");
        window.location.href = './login.html'
    }

    render() {
        let { menuicon, } = this.state
        return (
            <div className='topLine'>
                <div className="topLine_l">
                    <img src="./src/logo.jpg" alt="" />
                    <div className="name">后台管理</div>
                </div>
                <div className="topLine_r">
                    <a className='quita' onClick={this.quit}>退出登录</a>
                    <img src="./src/tz.png" alt="" />
                    <span className="username">也好</span>
                    <img src="./src/zh.png" alt="" />
                </div>
            </div>
        )
    }
}

class LeftMenu extends React.Component {
    constructor(props) {
        super(props);
        console.log(props, 'props');

        this.state = {
            category: this.props.category,
            code: this.props.code,
            class: this.props.class,
            height: this.props.height,
            showcode: this.props.height,
            selone: this.props.selone,
            items: [
                {
                    icon: "icon-dianpu-copy",
                    name: "商品管理",
                    showcode: "list",
                    code: "list",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "属性管理",
                    showcode: "parameter",
                    code: "parameter",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "会员管理",
                    showcode: "vipManage",
                    code: "vipManage",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "活动管理",
                    showcode: "activity",
                    code: "activity",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "订单管理",
                    showcode: "order",
                    code: "order",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "交接管理",
                    showcode: "join",
                    code: "join",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "支出信息",
                    showcode: "expend",
                    code: "expend",
                    mallmenu: [],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "基础信息",
                    showcode: "basics",
                    code: "",
                    mallmenu: [
                        {
                            name: "产品管理",
                            showcode: "product",
                            code: "product",
                        },
                        {
                            name: "客户管理",
                            showcode: "customer",
                            code: "customer",
                        },
                        {
                            name: "供应商管理",
                            showcode: "supplier",
                            code: "supplier",
                        },
                    ],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "入库管理",
                    showcode: "inStock",
                    code: "",
                    mallmenu: [
                        {
                            name: "入库单",
                            showcode: "inOrder",
                            code: "inOrder",
                        },
                        {
                            name: "入库明细",
                            showcode: "storeInDetail",
                            code: "storeInDetail",
                        },
                    ],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "出库管理",
                    showcode: "outStock",
                    code: "",
                    mallmenu: [
                        {
                            name: "出库单",
                            showcode: "outOrder",
                            code: "outOrder",
                        },
                        {
                            name: "出库明细",
                            showcode: "storeOutDetail",
                            code: "storeOutDetail",
                        },
                        {
                            name: "(供) 退货单",
                            showcode: "returnOrder",
                            code: "returnOrder",
                        },
                        {
                            name: "(供)退货明细",
                            showcode: "storeInBack",
                            code: "storeInBack",
                        },
                    ],
                },
                {
                    icon: "icon-dianpu-copy",
                    name: "库存统计表",
                    showcode: "inventorystatistical",
                    code: "inventorystatistical",
                    mallmenu: [],
                },
            ],
            leftnavhtml: [],
            pagearr: []
        };
    }


    componentDidMount() {
        let { height, leftnavlist, items } = this.state, leftnavhtml = [], showcode = ""
        showcode = height
        this.setState({ showcode: height })



        // leftnavlist.forEach((x, i) => {
        //     let mallmenuhtml = []
        //     if (x.mallmenu.length > 0) {
        //         x.mallmenu.forEach(y => {
        //             mallmenuhtml.push(
        //                 <div onClick={this.nav.bind(this, x.code)} className='rows'>
        //                     <div className={"twocategory "} >
        //                         <p style={{ marginLeft: "35" }}>{x.name}</p>
        //                     </div>
        //                 </div>
        //             )
        //         })
        //         leftnavhtml.push(
        //             <div className='rows' onClick={this.ischildshow.bind(this, x.showcode)}>
        //                 <div className={"category " + (`${this.state.showcode == x.showcode ? 'check' : ''}`)} >
        //                     <div className="disflexitems">
        //                         <i class={"iconfont " + (`${x.icon}`)}></i>
        //                         <p>{x.name}</p>
        //                     </div>
        //                     <div className="categorymore">
        //                         <img src={`./src/${this.state.showcode == x.showcode ? "select_xl" : "select_xl01"}.png`} />
        //                     </div>
        //                 </div>
        //             </div>
        //         )
        //         leftnavhtml.push(
        //             <div className={`tagbox ${x.showcode + "navbox"}`}>
        //                 {mallmenuhtml}
        //             </div>
        //         )
        //     } else {
        //         leftnavhtml.push(
        //             <div className='rows'>
        //                 <div className={"category " + (`${this.state.code == x.code ? 'check' : ''}`)} onClick={this.nav.bind(this, x.code)} >
        //                     <div className="disflexitems">
        //                         <i class={"iconfont " + (`${x.icon}`)}></i>
        //                         <p>{x.name}</p>
        //                     </div>

        //                 </div>
        //             </div>
        //         )
        //     }

        // })

        items.forEach((x, i) => {
            let mallmenuhtml = []
            if (x.mallmenu.length > 0) {
                x.mallmenu.forEach(y => {
                    mallmenuhtml.push(
                        <antd.Menu.Item key={y.showcode} onClick={this.nav.bind(this, y.code)} >
                            {y.name}
                        </antd.Menu.Item>
                    )
                })
                leftnavhtml.push(
                    <antd.Menu.SubMenu title={
                        <div className="disflexitems">
                            <i class={"iconfont " + (`${x.icon}`)}></i>
                            <p style={{ marginLeft: "10" }}>{x.name}</p>
                        </div>
                    } key={x.showcode} >
                        {mallmenuhtml}
                    </antd.Menu.SubMenu>
                )
            } else {
                leftnavhtml.push(
                    <antd.Menu.Item key={x.showcode} >
                        <div className="disflexitems" onClick={this.nav.bind(this, x.code)}>
                            <i class={"iconfont " + (`${x.icon}`)}></i>
                            <p style={{ marginLeft: "10" }}>{x.name}</p>
                        </div>
                    </antd.Menu.Item>
                )

            }
        })


        this.setState({ leftnavhtml, })
    }
    nav(e) {
        var path = `${e}.html`;
        window.location.href = path;
    }
    ischildshow(i, e) {
        let { showcode } = this.state, that = this
        console.log(showcode, 'showcode');
        this.setState({ selone: i })
        if (showcode == e) {
            that.setState({ showcode: "" })
        } else {
            that.setState({ showcode: e })
        }
    }
    onOpenChange(e) {

    }
    render() {
        return (
            <div className='LeftMenu'>
                <antd.Menu mode="inline" style={{ width: "180px" }}
                    defaultSelectedKeys={[this.state.code]}
                    defaultOpenKeys={[this.state.showcode]}
                >
                    {this.state.leftnavhtml}
                </antd.Menu>
                {/* <antd.Menu mode="inline" items={this.state.items} /> */}
                {/* {this.state.leftnavhtml} */}

                {/* <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'homePage' ? 'check' : ''}`)} onClick={this.nav.bind(this, 'homePage')} >
                    
                        <i class="iconfont icon-dianpu-copy"></i>
                        <p>首页</p>
                    </div>
                </div>
                <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'goods' ? 'check' : ''}`)} >
                     
                        <i class="iconfont icon-shangpin"></i>
                        <p>商品</p>
                    </div>
                    <div className="mallmenu">
                        <div className="mallmenu_ul">
                            <ul className="popups-main-ul">
                                <li className="group-title">商品管理</li>
                                <li className={"group-li " + (`${this.state.code == 'goods' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'goods')}>商品列表</li>
                                <li className="group-li">商品屏蔽</li>
                                <li className={"group-li " + (`${this.state.code == 'goodsunit' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'goodsunit')}>商品单位</li>
                                <li className="group-li">商品回收站</li>
                            </ul>
                            <ul className="popups-main-ul">
                                <li className="group-title">商品分类</li>
                                <li className={"group-li " + (`${this.state.code == 'goodstype' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'goodstype')}>分类列表</li>
                                <li className={"group-li " + (`${this.state.code == 'goodslabel' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'goodslabel')}>商品标签</li>
                            </ul>
                            <ul className="popups-main-ul">
                                <li className="group-title">品牌管理</li>
                                <li className={"group-li " + (`${this.state.code == 'goodsbrand' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'goodsbrand')}>品牌列表</li>
                            </ul>
                            <ul className="popups-main-ul">
                                <li className="group-title">价格管理</li>
                                <li className="group-li">商品价格</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'orders' ? 'check' : ''}`)} >
                   
                        <i class="iconfont icon-dingdan_dingdanliebiao"></i>
                        <p>订单</p>
                    </div>
                </div>
                <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'stock' ? 'check' : ''}`)} >
                     
                        <i class="iconfont icon-kucunguanli"></i>
                        <p>库存</p>
                    </div>
                    <div className="mallmenu">
                        <div className="mallmenu_ul">
                            <ul className="popups-main-ul">
                                <li className="group-title">库存管理</li>
                                <li className="group-li">库存现状</li>
                                <li className="group-li">入库管理</li>
                                <li className="group-li">出库管理</li>
                                <li className="group-li">调拨管理</li>
                                <li className="group-li">智能补货单</li>
                                <li className="group-li">成本调价单</li>
                                <li className="group-li">库存盘点</li>
                                <li className={"group-li " + (`${this.state.code == 'warehouse' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'warehouse')}>仓库管理</li>
                            </ul>
                            <ul className="popups-main-ul">
                                <li className="group-title">采购管理</li>
                                <li className={"group-li " + (`${this.state.code == 'supplier' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'supplier')}>供应商管理</li>
                                <li className="group-li">采购单</li>
                                <li className="group-li">采购退货单</li>
                            </ul>
                            <ul className="popups-main-ul">
                                <li className="group-title">库存报表</li>
                                <li className="group-li">采购商品明细</li>
                                <li className="group-li">出入库商品明细表</li>
                                <li className="group-li">出入库商品汇总表</li>
                                <li className="group-li">库存批次明细表</li>
                                <li className="group-li">库存商品保质期预警</li>
                                <li className="group-li">订单出库汇总</li>
                            </ul>

                        </div>
                    </div>
                </div>
                <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'customer' ? 'check' : ''}`)} >
                        
                        <i class="iconfont icon-kehuguanli"></i>
                        <p>客户</p>
                    </div>
                    <div className="mallmenu">
                        <div className="mallmenu_ul">
                            <ul className="popups-main-ul">
                                <li className="group-title">客户管理</li>
                                <li className="group-li">客户列表</li>
                                <li className="group-li">客户审核</li>
                                <li className="group-li">客户等级</li>
                                <li className={"group-li " + (`${this.state.code == 'businessarea' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'businessarea')}>业务区域</li>
                                <li className="group-li">客户标签</li>
                                <li className="group-li">客户沟通</li>
                                <li className="group-li">客户拜访</li>
                            </ul>

                        </div>
                    </div>
                </div>
                <div onClick={this.nav.bind(this, 'homePage')} className='rows'>
                    <div className={"category " + (`${this.state.code == 'capital' ? 'check' : ''}`)} >
                      
                        <i class="iconfont icon-money"></i>
                        <p>资金</p>
                    </div>
                </div>
                <div onClick={this.nav.bind(this, 'homePage')} className='rows'>
                    <div className={"category " + (`${this.state.code == 'reportform' ? 'check' : ''}`)} >
                  
                        <i class="iconfont icon-baobiaoguanli"></i>
                        <p>报表</p>
                    </div>
                </div>
                <div onClick={this.nav.bind(this, 'homePage')} className='rows'>
                    <div className={"category " + (`${this.state.code == 'marketing' ? 'check' : ''}`)} >
                       
                        <i class="iconfont icon-yingxiaoguanli"></i>
                        <p>营销</p>
                    </div>
                </div>
                <div className='rows'>
                    <div className={"category " + (`${this.state.showcode == 'system' ? 'check' : ''}`)} >
                      
                        <i class="iconfont icon-xitongfuwu"></i>
                        <p>系统</p>
                    </div>
                    <div className="mallmenu">
                        <div className="mallmenu_ul">
                            <ul className="popups-main-ul">
                                <li className="group-title">部门与员工</li>
                                <li className={"group-li " + (`${this.state.code == 'worker' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'worker')}>员工管理</li>
                                <li className={"group-li " + (`${this.state.code == 'roles' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'roles')}>角色管理</li>
                                <li className={"group-li " + (`${this.state.code == 'department' ? 'group-licheck' : ''}`)} onClick={this.nav.bind(this, 'department')}>部门管理</li>
                            </ul>

                        </div>
                    </div>
                </div> */}


            </div >



        )
    }
}